<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/tools" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">案由分析</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">案由分析工具</h2>
        <p class="text-sm text-gray-500 mb-6">
          输入案件描述，AI将为您分析适用的案由类型
        </p>

        <!-- 输入区域 -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            案件描述
          </label>
          <textarea
            v-model="caseDescription"
            placeholder="请详细描述您的案件情况..."
            class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            rows="6"
          ></textarea>
        </div>

        <!-- 分析按钮 -->
        <button
          @click="analyzeCase"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium"
          :disabled="!caseDescription.trim()"
        >
          <i class="fas fa-search mr-2"></i>
          开始分析
        </button>

        <!-- 分析结果 -->
        <div v-if="analysisResult" class="mt-6">
          <h3 class="text-md font-semibold mb-3">分析结果</h3>
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="mb-3">
              <span class="text-sm font-medium text-gray-700">推荐案由：</span>
              <span class="text-blue-600 font-medium">{{ analysisResult.caseType }}</span>
            </div>
            <div class="mb-3">
              <span class="text-sm font-medium text-gray-700">适用法律：</span>
              <span class="text-gray-600">{{ analysisResult.law }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">分析说明：</span>
              <p class="text-gray-600 text-sm mt-1">{{ analysisResult.explanation }}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'CaseAnalysis',
  setup() {
    const caseDescription = ref('')
    const analysisResult = ref(null)

    const analyzeCase = () => {
      // 模拟分析结果
      analysisResult.value = {
        caseType: '民间借贷纠纷',
        law: '《中华人民共和国民法典》第六百六十七条',
        explanation: '根据您描述的情况，本案符合民间借贷纠纷的特征。原告与被告之间存在借贷关系，被告未按约定偿还借款，构成违约。'
      }
    }

    return {
      caseDescription,
      analysisResult,
      analyzeCase
    }
  }
}
</script>
